<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
    <!-- 沙箱： 黑盒 环境 小环境 在这个沙箱中做的任何事情
        和外界无关
     -->
     <!-- 沙箱就是一种保护机制 ---沙箱模式 -->
     <script>
         var num = 10;
         (function () {
             var num = 100;
             console.log(num);
         }());
         (function () {
             var num = 10;
             console.log(num);
         })();
        //  让div和p的边框为红色 2px
        var div = document.querySelectorAll('div');
        var p = document.querySelectorAll('p');
        (function () {
            // 外面的div和p变量，和里面的div和p变量不会冲突
            // 因为沙箱模式的原因，这里的变量是局部作用域
            // 自身有，所以不会去外面找,如果里面没有，就按作用域链往上找0
           // var div = document.querySelectorAll('div');
            // var p = document.querySelectorAll('p');
            for(var i = 0; i < div.length; i++) {
                div[i].style.border = "2px solid red";
            }
            for(var i = 0; i < p.length; i++) {
                p[i].style.border = "2px solid red";
            }
        }())
     </script>
</body>
</html>